<template>
	<view class="flex-col page">
		<u-navbar title="邀请好友" :autoBack="true" bgColor="#fff" placeholder="true"></u-navbar>
		<view class="flex-col justify-start section_3">
			<view class="flex-col section_2">
				<text class="self-center text_3">邀新用户得豪华礼</text>
				<view class="flex-col justify-start items-center self-stretch relative group">
					<view class="flex-col section_4">
						<view class="flex-col items-start self-stretch">
							<image class="shrink-0 image_2"
								src="https://www.dlxx.top/static/images/80e40dcc63fbf509548a8cf94bd1ece8.png" />
							<image class="shrink-0 image_4"
								src="https://www.dlxx.top/static/images/56b6efe3cef1465c1fb84ec0ea188e71.png" />
						</view>
						<image class="self-end image_7 mt-149-5"
							src="https://www.dlxx.top/static/images/a94da4b5f7d93511e1772c01675219bf.png" />
					</view>
					<image class="image_3 pos_2"
						src="https://www.dlxx.top/static/images/fc003872c9b49bf61f12b565419f3b33.png" />
					<image class="image_6 pos_4"
						src="https://www.dlxx.top/static/images/15ed10b1d20c9bee2258cad0555b2e01.png" />
					<image class="image_5 pos_3"
						src="https://www.dlxx.top/static/images/01ed39504cc3fa1dee24bd55156aa015.png" />
				</view>
				<view class="flex-col justify-start self-stretch relative group_2">
					<view class="section_6"></view>
					<view class="flex-col justify-start items-end section_5 pos_5">
						<view class="group_3">
							<text class="font text">
								扫码进入小程序
								<br />
							</text>
							<text class="font text">了解每日行情</text>
						</view>
					</view>
					<view class="flex-col justify-start section_7 pos_7">
						<!-- <view class="flex-col justify-start items-center text-wrapper">
							<text class="font text text_4">分享邀请</text>
						</view> -->
					</view>
					<view class="flex-col justify-start items-center image-wrapper pos_6">
						<image class="image_8" :src="$util.img(userInfo.qrcode)" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {
				userInfo: [],
			};
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo');
			this.getUserInfo();
		},
		methods: {
			getUserInfo() {
				this.$api.sendRequest({
					url: '/api/member/info',
					data: {
						user_id: this.userInfo.id
					},
					success: res => {
						if (res.code == 1) {
							uni.setStorageSync('userInfo', res.data);
							this.userInfo = res.data;
						}
					}
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.mt-149-5 {
		margin-top: 299rpx;
	}

	.page {
		background-color: #f5f5f5;
		width: 100%;
		overflow-y: hidden;
		overflow-x: hidden;
		height: 100vh;

		.section {
			padding: 130rpx 0 38rpx;
			background-color: #ffffff;

			.text_2 {
				color: #00140d;
				font-size: 28rpx;
				font-family: PingFangSC;
				line-height: 27rpx;
			}

			.image {
				width: 94.4vw;
				height: 18.8vw;
			}

			.pos {
				position: absolute;
				left: 30rpx;
				right: 12rpx;
				bottom: 20rpx;
			}
		}

		.section_3 {
			background-image: url('https://www.dlxx.top/static/images/b0835a7d926974ef5c9430640bba091c.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.section_2 {
				padding: 45rpx 0 68rpx;
				background-image: url('https://www.dlxx.top/static/images/af2fc34153b0cc612d65aaa27afbdfbb.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				height: 100vh;

				.text_3 {
					color: transparent;
					font-size: 80rpx;
					font-family: FZZDHJW;
					line-height: 80rpx;
					text-transform: uppercase;
					background-image: linear-gradient(0deg, #ff3e20 0%, #ff3e20 41%, #fc7f3f 100%);
					-webkit-background-clip: text;
				}

				.group {
					margin-top: -40rpx;

					.section_4 {
						padding: 75rpx 3rpx 172rpx;
						background-image: url('https://www.dlxx.top/static/images/7ea423e13d9557d82a4b5893fa646417.png');
						background-size: 100% 100%;
						background-repeat: no-repeat;
						width: 629rpx;

						.image_2 {
							width: 29rpx;
							height: 22rpx;
						}

						.image_4 {
							margin-left: 153rpx;
							width: 24rpx;
							height: 42rpx;
						}

						.image_7 {
							margin-right: 15rpx;
							width: 36rpx;
							height: 38rpx;
						}
					}

					.image_3 {
						width: 61rpx;
						height: 61rpx;
					}

					.pos_2 {
						position: absolute;
						right: 49rpx;
						top: 86rpx;
					}

					.image_6 {
						width: 99.3333vw;
						height: 45.2vw;
					}

					.pos_4 {
						position: absolute;
						left: 0;
						right: 5rpx;
						bottom: 44rpx;
					}

					.image_5 {
						width: 104rpx;
						height: 93rpx;
					}

					.pos_3 {
						position: absolute;
						left: 21rpx;
						top: 248rpx;
					}
				}

				.group_2 {
					margin-top: -76rpx;
					padding-top: 73rpx;

					.section_6 {
						margin: 0 25rpx;
						background-image: linear-gradient(-270deg, #ffe4cc 0%, #fbbfa9 100%);
						border-radius: 20rpx;
						height: 356rpx;
					}

					.section_5 {
						padding: 72rpx 0 92rpx;
						background-color: #ffffff;
						border-radius: 20rpx;
						width: 631rpx;

						.group_3 {
							width: 270rpx;
							margin-right: 73rpx;
							text-align: center;
						}
					}

					.pos_5 {
						position: absolute;
						left: 50%;
						top: 0;
						transform: translateX(-50%);
					}

					.section_7 {
						padding: 89rpx 0 24rpx;
						border-radius: 20rpx;
						background-image: url('https://www.dlxx.top/static/images/d3aece283469dba1cf2ea45ededa3d9f.png');
						background-size: 100% 100%;
						background-repeat: no-repeat;

						.text-wrapper {
							margin: 0 39rpx;
							padding: 23rpx 0;
							background-color: #00806b;
							border-radius: 40rpx;

							.text_4 {
								color: #ffffff;
								line-height: 34rpx;
							}
						}
					}

					.pos_7 {
						position: absolute;
						left: 25rpx;
						right: 25rpx;
						top: 318rpx;
					}

					.font {
						font-size: 36rpx;
						font-family: PingFangSC;
						line-height: 63rpx;
						font-weight: 500;
						color: #fd7849;
					}

					.image-wrapper {
						padding: 11rpx 0;
						background-color: #fcaf97;
						border-radius: 10rpx;
						width: 207rpx;

						.image_8 {
							width: 185rpx;
							height: 185rpx;
						}
					}

					.pos_6 {
						position: absolute;
						left: 108rpx;
						top: 32rpx;
					}
				}
			}
		}

		.text {
			text-transform: uppercase;
		}
	}
</style>